<template>
  
  <div class="app-container">
    <el-row :gutter="10">
       <NavbarVote/>
    </el-row>
    <el-row :gutter="10" class="mapBox" >
        {{voteName}}
        <!-- <span :title="voteName"></span> -->
    </el-row>
    <el-row :gutter="10">
       <el-alert
        :title="prompt"
        type="success">
      </el-alert>
    </el-row>


    <el-form ref="form" v-loading="loading" :model="form" :rules="rules" label-width="70px">
      <el-row class="onlinevote-list" :gutter="20">
       <!-- :class="item.stypeColor == 'success'?'success':item.stypeColor == 'info'?'info':item.stypeColor == 'warning'?'warning':''" -->
        <el-col v-for="(item,index) in list" :key="item.id" :span="4" style="padding: 8px;" :class="'onlinevote-box '+item.stype" >
          <el-card shadow="always" >
            <el-row style="font-size:16px;" class="o-name">
              <!-- <el-input stype="border:0px;" readonly :value="item.userName" ></el-input> -->
               <span> {{item.userName}}</span>
            </el-row>
            <el-row style="height:50px;display:block;width:100%;"></el-row>
            <!-- <el-form-item  label="所在组" class="o-item-zu">
              <span>{{item.groupName}}</span>
            </el-form-item> -->
            <el-form-item  label="所在单位" class="o-item">
              <span>{{item.unitName}}</span>
            </el-form-item>
            <!-- :prop="'list.' + index +'.voteStatus'" -->
            <el-row  class="o-button">
              <el-form-item :prop="item.propsVal">
                <el-radio-group v-model="form[item.propsVal]"  @change="voteStatusChange($event,item,index)" >
                  <el-radio-button :label="1">同意</el-radio-button>
                  <el-radio-button :label="2">拒绝</el-radio-button>
                  <el-radio-button :label="3">弃权</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-link type="primary" @click="handleDetail(item.id)" class="o-link">查看详情</el-link>
            </el-row>
          </el-card>
        </el-col>
       
    </el-row>
    
  </el-form>  
   <div slot="footer"   class="dialog-footer o-footer">
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    <!-- 分页组件 -->
    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/> -->
    
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form  ref="formDetail" :model="formDetail"  label-width="80px">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="formDetail.userName" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="所在单位" prop="unitName">
          <el-input v-model="formDetail.unitName" placeholder="所在单位" />
        </el-form-item>
        <el-form-item label="附件" prop="fileUrl">
          <!-- <el-input-number v-model="form.weight" :min="1"  placeholder="请输入权重">0</el-input-number> -->
          <fileUpload v-model="formDetail.fileUrl" :limit="1"/>
        </el-form-item>
        <!-- <el-form-item label="用户简介">
          <editor v-model="formDetail.content" :min-height="192"/>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer o-footer">
        <el-button @click="cancelDetail">关  闭</el-button>
      </div>
    </el-dialog>
  </div>
  
</template>

<script>
import { NavbarVote} from '@/layout/components'
import {updateUserResult,getUserResultPage,getUserResult,getGroupName,getUserResultList} from "@/api/vote/voteonline";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import Editor from '@/components/Editor';
import FileUpload from "@/components/FileUpload";
import { getCurrVote } from "@/api/vote/info";
export default {
  name: "VoteOnline",
  components: {
    Editor,
    FileUpload,
    NavbarVote
  },
  
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 投票结果列表
      list: [],
      // 弹出层标题
      title: "",      
      // 提示信息
      prompt: '',
      // 投票名称
      voteName: "",
      // 投票id
      voteId: this.$route.query.voteId,
      // 投票规则信息
      vote: {voteName:"",groupName:""},
      // 是否显示弹出层
      open: false,
      dateRangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      groupNameList: [],
      // 表单参数
      form: {
        voteStatusList: []
      },
      formDetail: {
      },
      // 表单校验
      rules: {
      },
      voteTypeDictDatas: getDictDatas(DICT_TYPE.VOTE_RULE_TYPE),
    };
  },
  created() {
    this.getVoteInfo();
    
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;						
      this.queryParams.voteId=this.voteId;
      // 处理查询参数
      let params = {...this.queryParams};
      // 执行查询
      getUserResultList(params).then(response => {
        this.list = response.data;
        this.form.voteStatusList=Array.from({ length:this.list.length }, (item,index) => ({id:this.list[index].id,voteStatus:null,userName:this.list[index].userName}))
		   
        for (let item of  this.list){
          const rule = [{ required: true, message: "请投票", trigger: "blur" }]
          let key = 'value'+item.id;
          this.rules[key] = rule;
          item.propsVal = key;
          this.$set(this.form, key, null);
        }
        this.setVoteStype();
		    this.loading = false			
      });
    },

    getVoteInfo(){
      getCurrVote().then(resp=>{
        this.vote = resp.data;
        this.voteId = this.vote.id;
        this.form.voteId = this.voteId;
        this.getList();
        this.getGroup();
      })
    },

    setVoteStype(){
      let stype = ["success","info","warning","default"];
      let group = "",offset = 0;
      for(let i=0;i<this.list.length;i++){

        if(group!=this.list[i].groupName){
          group = this.list[i].groupName;
          offset = (++offset)%4;
        }
        this.list[i].stype = stype[offset];

        // for (let item of  this.list){
        //   if(group!=item.groupName){
        //     group = item.groupName;
        //   }
        //   item.stype = stype[i%4];
        // }
      }
    },

    voteStatusChange(val,item,index){
      let groupCount = 0;
      this.form.voteStatusList[index].voteStatus=val;
      this.form.voteStatusList[index].id=item.id;
      this.form.voteStatusList[index].userName=item.userName;
      this.form.voteStatusList[index].groupName=item.groupName;
      for(let vote of this.form.voteStatusList){
        if(item.groupName!=vote.groupName){
          continue;
        }
        if(vote.voteStatus===1){
           groupCount++;
        }
      }

      for(let group of this.groupNameList){
        if(group.groupName!=item.groupName){
          continue;
        }

        if(groupCount>group.excellentMaxCount){
           this.$modal.msgError(group.groupName+"-同意人数不能超过"+group.excellentMaxCount+"人");
           this.form.voteStatusList[index]={};
           this.form['value'+item.id]=null;
           return true;
        }
        group.selected = groupCount;
      }
    },

    getGroup(){
      let params = {voteId:this.voteId}
      getGroupName(params).then(response =>{
          this.groupNameList = response.data;
          console.log(this.groupNameList[0])
          console.log(this.groupNameList[0].groupName)
          this.voteName = this.vote.voteName+"-"+this.groupNameList[0].groupName;
          console.log(this.voteName)
          let rate = this.groupNameList[0].excellentMaxCountRate*100;
          if(this.groupNameList.length==1){
            this.prompt = "按"+rate+"%投同意票,当前组投同意票不能操过"+this.groupNameList[0].excellentMaxCount+"人";
          }else{
            this.prompt = "按"+rate+"%投同意票";
          }
      })
    },
    /** 取消按钮 */
    cancel() {
      this.$parent.closeVoteOnline();
      this.$parent.getList();
      this.open = false;
    },
    /** 取消按钮 */
    cancelDetail() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.formDetail = {
        userName: null,
        unitName: null,
        fileUrl: null,
        content: null
      };
    },
    /** 查看详情操作 */
    handleDetail(id) {
					 
      getUserResult(id).then(response => {
        this.formDetail = response.data;
        this.open = true;
        this.title = "用户详情";
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
   
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          this.$modal.msgError("您有尚未选择的投票信息！");
          return;
        }
        this.$modal.confirm('是否确认提交投票信息?').then(()=>{
          let updateResult = {
            voteStatusList: this.form.voteStatusList,
            voteId: this.voteId
          }
          updateUserResult(updateResult).then(response => {
            this.$modal.msgSuccess("投票成功");
            this.open = false;
          });
        })
      });
     
      // this.$refs["form"].validate(valid => {
      //   if (!valid) {
      //     this.$modal.msgError("您有尚未选择的投票信息！");
      //     return;
      //   }
      //   let updateResult = {
      //     voteStatusList: this.form.voteStatusList,
      //     voteId: this.voteId
      //   }
      //   updateUserResult(updateResult).then(response => {
      //     this.$modal.msgSuccess("投票成功");
      //     this.open = false;
      //   });
      // });
    },
    
  }
};
</script>
<style lang="scss" scoped>
.mapBox{
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  padding: 30px 0;
}
.onlinevote-list{
  display: flex;
  flex-wrap: wrap;
  ::v-deep .el-form-item__content{
    margin-left: inherit !important;
  }
  .onlinevote-box{
    // success ,info,warning,default
    .is-error{
      position: relative;
      ::v-deep .el-form-item__error{
        width: 100px;
        padding: 10px;
        background-color: #FFF;
        position: absolute;
        top:-50px;
        left: 50%;
        font-size: 20px;
        // margin-left: -55px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        &:after {
          content: " ";
          border-width: 6px;
          bottom: -6px;
          margin-left: -6px;
          border-top-color: #fff !important;
          border-bottom-width: 0;
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          border-color: transparent;
          border-top-color: transparent;
          border-style: solid;
        }
      }
    }
    &.default{
      .o-name{
        background-image: url('../../../assets/images/tag_bg3.png');
      }
    }
    &.success{
      .o-name{
        background-image: url('../../../assets/images/tag_bg4.png');
      }
      .o-item-zu{
        span{
          border:1px solid #41d281;
          background-color: #41d281;
        }
      }
      .o-link{
        color: #41d281;
      }
      .is-active{
        ::v-deep .el-radio-button__inner{
          background-color: #41d281 !important;
          border-color: #41d281 !important;
          box-shadow: -1px 0 0 0 #41d281;
        }
      }
    }
    &.info{
      .o-name{
        background-image: url('../../../assets/images/tag_bg5.png');
      }
      .o-item-zu{
        span{
          border:1px solid #54b89b;
          background-color: #54b89b;
        }
      }
      .o-link{
        color: #54b89b;
      }
      .is-active{
        ::v-deep .el-radio-button__inner{
          background-color: #54b89b !important;
          border-color: #54b89b !important;
          box-shadow: -1px 0 0 0 #54b89b;
        }
      }
    }
    &.warning{
      .o-name{
        background-image: url('../../../assets/images/tag_bg6.png');
      }
      .o-item-zu{
        span{
          border:1px solid #c7984f;
          background-color: #c7984f;
        }
      }
      .o-link{
        color: #c7984f;
      }
      .is-active{
        ::v-deep .el-radio-button__inner{
          background-color: #c7984f !important;
          border-color: #c7984f !important;
          box-shadow: -1px 0 0 0 #c7984f;
        }
      }
    }
    position: relative;
    .o-item,.o-item-zu{
      margin-bottom: 0;
    }
    .o-item-zu{
      span{
        border:1px solid #1890ff;
        background-color: #1890ff;
        color: #FFF;
        border-radius: 5px;
        height: 20px;
        line-height: 16px;
        display: inline-block;
        padding: 0 10px;
      }
    }
    .o-name{
      position: absolute;
      top:9px;
      left: -1px;
      // margin: -4px 0 0 -70px;
      width: 160px;
      height: 50px;
     
      // background-color: #FFF;
      // background-image: url('../../../assets/images/tag_bg3.png');
      background-size: cover;
      background-position: bottom center;
      // border-radius: 5px;
      // border: 1px solid #e6ebf5;
      margin-bottom: 20px;
      color: #FFF;
      padding-top: 8px;
      span{
        display: inline-block;
        padding-left: 30px;
        font-size: 18px;
        font-weight: 700;
      }
      span.zu{
        font-size: 12px;
        color: #FFFF00;
        font-weight: normal;
      }
    }
    .o-button{
      text-align: center;
      margin-top: 20px;
    }
  }
}
.o-footer{
  display: block;
  width: 100%;
  padding: 30px 0;
  text-align: center;
}
</style>